import { useState,useEffect } from 'react'
import {LeftOutlined} from '@ant-design/icons'
import { Link } from 'react-router-dom'
import { Image, Rate } from 'antd'

import store from '../../store'
import http from '../../request'
import { torem } from '../../assets/js/rem'

const Details = () => {
  const baseURL = 'https://gw.alicdn.com/tfs/'
  const [data, setData] = useState({})
  const [evaluation, setEvaluation] = useState([])
  const [open, setOpen] = useState(!0)

  useEffect(() => {
    store.dispatch({type:'changeFooter', data:false})
    getInfo()
    getEvaluation()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return(
    <div>
      <div className="u-flex u-sticky u-p-l-10 u-border-bottom" style={{lineHeight:torem(40),backgroundColor:'#fff',zIndex:9}}>
        <Link to='/'><LeftOutlined/></Link>
        <div className='u-margin-auto u-h2'>{data.showName}</div>
      </div>
      <div className='u-background-image u-flex u-p-l-15 u-col-bottom' style={{height:torem(202)}}>
        <div><Image width={torem(125)} src={baseURL + data.poster}/></div>
        <div className='u-m-l-15 u-font-12' style={{color:'#fff'}}>
          <div className='u-m-b-8' style={{fontSize:torem(19)}}>{data.showName}</div>
          <div className='u-m-b-8' style={{opacity:.8}}>{data.showNameEn}</div>
          <div className='u-m-b-8' style={{opacity:.8}}>{data.type}</div>
          <div className='u-m-b-8' style={{opacity:.8}}>{data.country} | {data.duration}分钟</div>
          <div className='u-m-b-38' style={{opacity:.8}}>{data.openTime}在中国上映</div>
          <div className='u-m-b-15' style={{ marginTop: '-9px' }}><Rate className='rate' disabled style={{ fontSize: torem(12) }} allowHalf defaultValue={data.remark - 5} /><span className='u-font-12' style={{opacity:1}}>{data.remark}</span></div>
        </div>
      </div>
      <div className='u-p-15 u-font-15' style={{lineHeight:torem(25)}}>
        <div className={open ? 'u-open' : ''}>{data.description}</div>
        <div className='u-text-center u-p-10' onClick={changeOpen}>{open ? '展开' : '收回'}</div>
      </div>
      <div className='u-border-top u-p-t-20 u-p-l-10'>
        <div className='u-h2'>演剧人员</div>
        <div className='u-flex-top u-m-t-10' style={{overflow:'scroll',height:torem(160)}}>
          <Image.PreviewGroup>
          {(data?.artistes?.actor ?? []).map(i => <div className='u-flex-col u-m-r-5' key={i.id}><Image width={torem(80)} height={torem(124)} src={baseURL + i.avatar}/><div className='u-font-13 ellipsis' style={{width:torem(80)}}>{i.artisteName}</div><div className='u-font-13' style={{color:"#999"}}>{i.profession}</div></div>)}
          </Image.PreviewGroup>
        </div>
      </div>
      <div className='u-border-top u-p-t-20 u-p-l-10'>
        <div className='u-h2'>剧照</div>
        <div className='u-m-t-10' style={{overflow:'scroll',height:torem(150),whiteSpace:'nowrap'}}>
          <Image.PreviewGroup>
          {(data?.trailer ?? []).map((i,ind) => <div className='u-float' key={ind}><Image height={torem(124)} src={baseURL + i}/></div>)}
          </Image.PreviewGroup>
        </div>
      </div>
      <div className='u-border-top u-p-t-20 u-p-l-10'>
        <div className='u-h2'>热门评论(105707条)</div>
        {evaluation.map(i => <div key={i.id} className='u-flex-to u-p-t-10 u-p-b-20 u-m-r-5 u-border-bottom u-font-12'>
          <div><img style={{display:'inline-block',width:20,height:20}} src='https://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_100x100.jpg' alt=''/></div>
          <div>
            <div className='u-flex-to'>
              <div className='u-font-14' style={{fontWeight:700,width:torem(120)}}>{i.nickName}</div>
              <div><Rate className='rate' disabled style={{ fontSize: torem(13) }} allowHalf defaultValue={i.remark} /></div>
              <div className='u-m-l-60'>12-05 16:07</div>
            </div>
            <div style={{lineHeight:torem(20)}}>{i.content}</div>
          </div>
        </div>)}
      </div>
      <div className='u-text-center u-m-20 u-p-b-20' style={{color:'#666'}}>没有更多了~</div>
    </div>
  )
  function getInfo() {
    const detailStr = store.getState().detailStr
    http('/info/', 'get', {params:{name:detailStr}}).then(res => {
      if(res.data.data.returnCode === '0') {
        setData(res.data.data.returnValue)
        console.log(data);
      }
    }).catch(err => console.log(err))
  }
  function changeOpen() {
    setOpen(!open)
  }

  function getEvaluation() {
    const detailStr = store.getState().detailStr
    http('/evaluation/', 'get', { params: { name: detailStr } }).then(res => {
      if (res.data.data.returnCode === '0') {
        const data = res.data.data.returnValue.map(i => {
          i.remark = i.remark - 5
          return i
        })
        setEvaluation(data)
      }
    }).catch(err => console.log(err))
  }
}


export default Details